<template>
  <!-- <article class="p-3" v-loading="loading"> -->
  <article class="p-3 pb-5" v-loading="loading">
    <h4 class="word-break font-weight-normal">{{events.basicTitle}}</h4>
    <section>
      <p class="text-muted fz-12">{{$formatDateTime(events.ctime, 'zh')}}</p>

      <div class="card mb-3" style="background-color: #EEE;">
        <div v-if="events.activityLogo">
          <div class="zoomImage" v-lazy:background-image="events.activityLogo"></div>
        </div>
        <div class="card-body" :class="{'text-gray-400': events.activityStatus !== 'START'}">
          <p class="card-text text-center mb-2">
            活动时间: {{$formatYMD(events.activityStartTime)}}
            至
            {{$formatYMD(events.activityEndTime)}}
          </p>
          <p class="card-text text-center mb-0">
            报名时间: {{$formatYMD(events.signStartTime)}}
            至
            {{$formatYMD(events.signEndTime)}}
          </p>
          <el-button type="success" style="font-size: 20px;" class="btn-fixed-bottom" v-show="events.activityStatus === 'START'" @click="goLogin">活动报名</el-button>
        </div>
      </div>
      <section>
        <div class="word-break article-img"  v-html="events.activityContent"></div>
      </section>
    </section>
    <!-- 二维码 -->
    <!-- <div class="" ref="qrcode" class="text-center"></div>
    <p class="mt-0 text-gray-500 text-center">长按二维码，可分享与其他人</p> -->

    <div class="d-flex justify-content-between">
      <div class="text-gray-500">
        阅读 {{events.browseNumber}}
      </div>
      <div class="text-tdsuccess">
        <img src="../../assets/dianzan2.png" class="img-responsive" style="width: 20px;position: relative;top: -3px;" alt="">
        <span class="mr-2">{{events.likeNumber}}</span>
      </div>
    </div>
    <comments :info="events.coms" class="mt-3"></comments>
  </article>
</template>

<script>
import axios from 'axios'
// import QRCode from 'qrcode'

let gen = async function (self) {
  let activityRes = await axios.post('/mscs/activity/findActivityContentById', self.$paramsConvert({activityId: self.$route.query.activityId}))
  self.row = activityRes.data.data.data
  
  // debugger
  self.events = Object.assign({}, self.events, self.row)
  self.events.ctime = parseInt(self.events.ctime)
  self.events.basicType = 'ACTIVITY'
  let conpara = { activityId: self.row.activityId }

  let url = '/mscs/activity/findActivityContentById'
  // 请求内容
  let res = await axios.post(url, self.$paramsConvert(conpara))
  // console.log('aaaaaaaaa', res);

  self.events.like = parseInt(res.data.data.like)
  self.events.likeNumber = parseInt(res.data.data.likeNumber)
  self.events.browseNumber = parseInt(res.data.data.browseNumber)
  self.events.activityId = res.data.data.data.activityId
  self.events.activityContent = res.data.data.data.activityContent
  self.events.activityStatus = res.data.data.data.activityStatus
  self.events.activityStartTime = res.data.data.data.activityStartTime
  self.events.activityEndTime = res.data.data.data.activityEndTime
  self.events.activityLogo = res.data.data.data.activityLogo
  self.events.basicTitle = res.data.data.data.activityTitle
  self.events.ctime = res.data.data.data.ctime
  self.events.isPublish = res.data.data.data.isPublish
  self.events.signEndTime = res.data.data.data.signEndTime
  self.events.signStartTime = res.data.data.data.signStartTime
  self.events.updateTime = res.data.data.data.updateTime
  self.events.basicType = res.data.data.data.activityType
  self.events.isComment = res.data.data.data.isComment

  // 请求评论
  if (self.events.isComment === 'YES') {
    let comresUrl = '/mscs/activity/findCommentByType'
    let comres = await axios.post(comresUrl, self.$paramsConvert({activityId: conpara.activityId}))
    self.events.coms = comres.data.data
  }
  // self.qrcode()
}

export default {
  name: "eventdetails",
  title: "活动详情",
  props: {
    // row: {}
  },
  data () {
    return {
      row: {},
      events: {
        coms: []
      },
      loading: false
    }
  },
  methods: {
    allGen () {
      this.loading = true
      gen(this).then(() => {}).catch((err) => {
        this.$catchError(err)
      }).finally(() => {
        this.loading = false
      })
    },
    goLogin () {
      this.$router.push({name: 'login', params: {activityId: this.events.activityId}})
    },
    qrcode () {
      let canvas = document.createElement('canvas')
      console.log('http://10.0.0.156:8080/#/load?activityId=' + this.events.activityId);
      QRCode.toCanvas(canvas, 'http://10.0.0.156:8080/#/load?activityId=' + this.events.activityId, { width: 200 }, (err, canvas) => {
        var image = new Image()
        image.src = canvas.toDataURL("image/png")
        this.$refs.qrcode.append(image)
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      // vm.row = JSON.parse(to.query.row)
      vm.allGen()
    })
  }
}
</script>
